<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <meta name="description" content="Your description goes here" />
  <meta name="keywords" content="your,keywords,goes,here" />
  <meta name="author" content="Your Name / Original design: Gerhard Erbes - gw@actamail.com/" />
  <link rel="stylesheet" type="text/css" href="./css/style.css" />
  <title>Go Flexible</title>
</head>

<body>
  <div id="wrap">

    <!-- HEADER -->
	  <!-- Background -->
    <div id="header-section">
		  <a href="#"><img id="header-background-left" src="./img/img_logo.jpg" alt=""/></a>
      <img id="header-background-right" src="./img/img_header.jpg" alt=""/>
		</div>

	  <!-- Navigation -->
    <div id="header">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu Link 1</a></li>
        <li><a href="#">Menu Link 2</a></li>
        <li class="selected">Menu Link 3</li>
        <li><a href="#">Menu Link 4</a></li>  
        <li><a href="#">Menu Link 5</a></li>
      </ul>
    </div>

	  <!-- LEFT COLUMN -->
	  <!-- Navigation -->
    <div id="left-column">
      <ul>
        <li class="left-navheader-first">Menu 3</li>
        <li><a class="left-navheader" href="#">Menu link 3-1</a></li>
        <li><a href="#">Menu Link 3-1-1</a></li>
        <li><a href="#">Menu Link 3-1-2</a></li>
        <li><a href="#">Menu Link 3-1-3</a></li>
        <li><a class="left-navheader" href="#">Menu Link 3-2</a></li>
        <li><a href="#">Menu Link 3-2-1</a></li>
        <li><a href="#">Menu Link 3-2-2</a></li>
		    <li><a href="#">Menu Link 3-2-3</a></li>
        <li><a class="left-navheader" href="#">Menu Link 3-3</a></li>
        <li><a href="#">Menu Link 3-3-1</a></li>
		    <li class="selected">Menu Link 3-3-2</li>
        <li><a href="#">Menu Link 3-3-3</a></li>
        <li><a class="left-navheader" href="#">Menu Link 3-4</a></li>
        <li><a href="#">Menu Link 3-4-1</a></li>
        <li><a href="#">Menu Link 3-4-2</a></li>
        <li><a href="#">Menu Link 3-4-3</a></li>				
      </ul>
    </div>

	  <!-- RIGHT COLUMN -->
    <div id="right-column">
			
      <!-- Right column box -->
      <div class="right-column-box-white">
        <div class="right-column-box-title-grey">Color options</div>
        <p>All boxes in the middle and right columns can vary colors for titles and backgrounds. See examples below. The colors for titles and backgrounds can be chosen independently.</p>				
      </div>
			
      <!-- Right column box -->
      <div class="right-column-box-white">
        <div class="right-column-box-title-grey">Grey title</div>
		  	<p>White background.</p>
      </div>
			
      <!-- Right column box -->
      <div class="right-column-box-white">
        <div class="right-column-box-title-blue">Blue title</div>
		  	<p>White background.</p>
      </div>
			
      <!-- Right column box -->
      <div class="right-column-box-white">
        <div class="right-column-box-title-yellow">Yellow title</div>
		  	<p>White background.</p>
      </div>

      <!-- Right column box -->
      <div class="right-column-box-white">
        <div class="right-column-box-title-green">Green title</div>
		  	<p>White background.</p>
      </div>
			
      <!-- Right column box -->
      <div class="right-column-box-white">
        <div class="right-column-box-title-red">Red title</div>
		  	<p>White background.</p>
      </div>
			
      <!-- Right column box -->
      <div class="right-column-box-blue">
        <div class="right-column-box-title-blue">Blue title</div>
		  	<p>Blue background.</p>
      </div>
			
      <!-- Right column box -->
      <div class="right-column-box-yellow">
        <div class="right-column-box-title-yellow">Yellow title</div>
		  	<p>Yellow background.</p>
      </div>

      <!-- Right column box -->
      <div class="right-column-box-green">
        <div class="right-column-box-title-green">Green title</div>
		  	<p>Green background.</p>
      </div>
			
      <!-- Right column box -->
      <div class="right-column-box-red">
        <div class="right-column-box-title-red">Red title</div>
		  	<p>Red background.</p>
      </div>			

      <!-- Right column box -->
      <div class="right-column-box-white">
        <div class="right-column-box-title-grey">Grey title</div>
	  		<p>Use this column for news, events, button links, further links, or whatever you want.</p>
      	<p>Additional links:</p>								
	  		<p><a href="#">Link A</a></p>
			  <p><a href="#">Link B</a></p>
			  <p><a href="#">Link C</a></p>			
      </div>												
    </div>

	  <!-- MIDDLE COLUMN -->
    <div id="middle-column">
	 			
		  <!-- Middle column full box -->
      <div class="middle-column-box-white">
        <div class="middle-column-box-title-grey">Grey title</div>
	  			<p><img src="./img/img_general.jpg" class="middle-column-img-left" width="100" alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. Suspendisse non risus a diam convallis lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse non risus a diam convallis lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse non risus a diam convallis lobortis.</p>
  				<p><a href="#">Read more</a></p>
      </div>
			
      <!-- Middle column left section -->
      <div class="middle-column-left">

        <!-- Middle column left box -->
        <div class="middle-column-box-left-white">
          <div class="middle-column-box-title-grey">Grey title</div>
          <p><img src="./img/img_general.jpg" class="middle-column-img-left" width="50"  alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. Suspendisse non risus a diam convallis lobortis.</p>
  				<p><a href="#">Read more</a></p>
        </div>
				
        <!-- Middle column left box -->
        <div class="middle-column-box-left-white">
          <div class="middle-column-box-title-grey">Grey title</div>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. Suspendisse non risus a diam convallis lobortis.</p>
  				<p><a href="#">Read more</a></p>
        </div>
      </div>		
		
      <!-- Middle column right section -->		
		  <div class="middle-column-right">

        <!-- Middle column right box -->
        <div class="middle-column-box-right-white">
          <div class="middle-column-box-title-grey">Grey title</div>
	  			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. Suspendisse non risus a diam convallis lobortis.</p>
        </div>

        <!-- Middle column right box -->
		    <div class="middle-column-box-right-white">
          <div class="middle-column-box-title-grey">Grey title</div>
          <p><img src="./img/img_general.jpg" class="middle-column-img-left" width="50"  alt=""/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. Suspendisse non risus a diam convallis lobortis. Suspendisse non risus a diam convallis lobortis. Suspendisse non risus a diam convallis lobortis</p>
        </div>				
		  </div>
									
	    <!-- Middle column full box -->
      <div class="middle-column-box-white">
        <div class="middle-column-box-title-grey">Grey title</div>
          <p class="subheading">Basic layout</p>
          <p>The basic concept consiss of a three-column layout combined with individual boxes in the middle and right columns. The layout is flexible in two ways. Firstly, the strong menu-capabilities at the top header and left column are comphrehensive and can navigate through a content heavy website. Secondly, by having boxes in the middle and right columns, important topics can be brought to special attention and found more quickly than by going through the menus.</p> 
          <p class="subheading">Middle section</p>
          <p>The text boxes in the middle column consist of two types. Firstly, boxes covering the full width, and secondly boxes covering the half width. The number or sequence of full- or half-width boxes can be chosen freely.</p>
          <p class="subheading">Color scheme and graphics</p>
					<p>The color scheme for the middle and right columns have an independent control of the box titles and the box backgrounds. The layout also provides the possibility of inserting or removing graphics in the middle column.</p>
          <p class="subheading">Text paragraphs</p>
					<p>Three types of text paragraphs are offered, namely "heading", "subheading" and normal text.</p>
      </div>
		</div>

	  <!-- FOOTER -->
    <div id="footer">
       Copyright &copy; 2006 Your Company Name | All Rights Reserved<br />Design by <a href="mailto:gw@actamail.com">Gerhard Erbes</a> | <a href="http://validator.w3.org/check?uri=referer" title="Validate code as W3C XHTML 1.1 Strict Compliant">W3C XHTML 1.1</a> | <a href="http://jigsaw.w3.org/css-validator/" title="Validate Style Sheet as W3C CSS 2.0 Compliant">W3C CSS 2.0</a>
    </div>
  </div>
</body>
</html>